<!-- 采购订单采购商品列表(根据商品类别变化) -->
<template>
  <div v-if="ctgId">
    <el-table v-if="ctgId" :data="dataList" ref="multipleTable" border v-loading="loading" header-cell-class-name="miui-header-cell-style" show-summary :summary-method="getSummaries" @selection-change="handleSelectionChange">
      <el-table-column key="1" type="selection" width="55"></el-table-column>
      <el-table-column key="2" prop="code" label="商品代码"></el-table-column>
      <el-table-column key="3" prop="name" label="商品名称"></el-table-column>
      <el-table-column key="4" prop="spec" label="型号"></el-table-column>
      <el-table-column key="5" prop="mirrorBall" label="老花镜度数" v-if="ctgId == 8"></el-table-column>
      <el-table-column key="6" prop="manufacturerColorNumber" label="厂家色号" v-if="[1,6,8].includes(ctgId)"></el-table-column>
      <el-table-column key="7" label="框架材质" v-if="ctgId == 1">
        <template slot-scope="scope">
          {{getValueByType(frameMaterialData,scope.row.frameMaterial)}}
        </template>
      </el-table-column>
      <el-table-column key="8" prop="goodsSize" label="框架尺寸" v-if="[1,6,8].includes(ctgId)"></el-table-column>
      <el-table-column key="9" label="配件类型" v-if="ctgId == 2">
        <template slot-scope="scope">
          {{getValueByType(bizData.accessoryTypeData,scope.row.accessoriesType)}}
        </template>
      </el-table-column>
      <el-table-column key="10" prop="mirrorBall" label="球镜" v-if="[3,4].includes(ctgId)"></el-table-column>
      <el-table-column key="11" prop="columnMirror" label="柱镜" v-if="[3,4].includes(ctgId)"></el-table-column>
      <el-table-column key="12" prop="toTheLight" label="下加光" v-if="ctgId == 3"></el-table-column>
      <el-table-column key="13" prop="refractiveIndex" label="折射率" v-if="ctgId == 3"></el-table-column>
      <el-table-column key="14" label="镜片分类" v-if="ctgId == 3">
        <template slot-scope="scope">
          {{getValueByType(bizData.photometricClassification,scope.row.photometricClassification)}}
        </template>
      </el-table-column>
      <el-table-column key="15" label="材料分类" v-if="ctgId == 3">
        <template slot-scope="scope">
          {{getValueByType(bizData.lensMaterial,scope.row.lensMaterial)}}
        </template>
      </el-table-column>

      <el-table-column key="16" prop="curvature" label="曲率" v-if="ctgId == 4"></el-table-column>
      <el-table-column key="17" prop="diameter" label="直径" v-if="ctgId == 4"></el-table-column>
      <el-table-column key="18" prop="useType" label="使用类型" v-if="ctgId == 4"></el-table-column>
      <el-table-column key="19" prop="disusedClassification" label="抛弃类型" v-if="ctgId == 4"></el-table-column>

      <el-table-column key="20" prop="primaryCapacity" label="主容量" v-if="ctgId == 5"></el-table-column>
      <el-table-column key="1" prop="secondaryCapacity" label="次容量" v-if="ctgId == 5"></el-table-column>

      <el-table-column key="21" prop="applyQuantity" label="采购数量">
        <template slot-scope="scope">
          <el-input v-model="scope.row.applyQuantity" :ref="'number'+scope.$index" @keyup.enter.native="enterChange(scope.$index)"></el-input>
        </template>
      </el-table-column>
      <el-table-column key="22" prop="memo" label="备注" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-input v-model="scope.row.memo"></el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    props: ['ctgId','dataList','loading','frameMaterialData'],
    data() {
      return {

      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    methods:{
      handleSelectionChange(val) {
        this.$emit('refreshData',val)
      },
      getValueByType(data,key){
        let obj = {}
        obj = data.find(item => {
          return item.value == key
        })
        if(obj && obj.label){
          return obj.label
        }
      },
      //  回车切换下一行商品数量
      enterChange(index){
        if(this.$refs['number'+(index*1 + 1)]){
          this.$refs['number'+(index*1 + 1)].focus()
        }
      },
      //  合计
      getSummaries(param) {
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          // if (index === 0) {
          //   sums[index] = '合计';
          //   return;
          // }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            let zIndex = ''
            if([1,8].includes(this.ctgId)){
              zIndex = 7
            }else if([2].includes(this.ctgId)){
              zIndex = 5
            }else if([3,4].includes(this.ctgId)){
              zIndex = 10
            }else if([5,6].includes(this.ctgId)){
              zIndex = 6
            }else if([7,9].includes(this.ctgId)){
              zIndex = 4
            }
            if(index == zIndex){
              sums[index] = '合计： ' + values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0)
            }

          }
        });
        return sums;
      }
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-table {
  display: flex;
  flex-direction: column;
  }

  /deep/ .el-table__body-wrapper {
  order: 1;
  }
</style>
